<template>
  <view class="addaddr">
    <van-cell-group>
      <view class="zhanwei">用户名</view>
      <van-field
        placeholder="请输入姓名"
        :border="false"
        @change="dataChange('name', $event)"
      />
      <view class="zhanwei">手机号</view>
      <van-field
        placeholder="请输入手机号"
        :border="false"
        @change="dataChange('mobile', $event)"
      />
      <view class="zhanwei">地址</view>
      <van-field
        placeholder="请输入地址"
        :border="false"
        @change="dataChange('addr', $event)"
      />
    </van-cell-group>
    <view class="zhanwei"></view>
    <van-button type="info" size="large" @click="addAddress" :disabled="is_disabled">添加</van-button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        addrObj:{
          name:"",
          addr:"",
          mobile:""
        }
      }
    },
    methods: {
      addAddress(){
        let addrList = wx.getStorageSync('addrList') || []
        addrList.push({...this.addrObj})
        wx.setStorageSync("addrList", addrList)
        uni.$emit('getaddrlist', addrList)
        wx.navigateBack()
      },
      dataChange(key, e){
        this.addrObj[key] = e.detail
      }
    },
    computed:{
      is_disabled(){
        return !this.addrObj.name || !this.addrObj.addr || !this.addrObj.mobile
      }
    }
  }
</script>

<style scoped lang="scss">
.addaddr{
  height: 100vh;
  background-color: #eee;
  .zhanwei{
    color: #777;
    padding:5rpx 20rpx;
  }
}
</style>
